<!--
 * @Author: fisher luthor-li@qq.com
 * @Date: 2024-05-06 16:50:13
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-05-07 15:42:59
 * @FilePath: \psmaster_front\src\modules\cloud\projManager\projDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="dialogTile"
    width="400"
    :destroy-on-close="true"
  >
    <el-form :model="form">
      <el-form-item label="项目名称" :label-width="formLabelWidth">
        <el-input
          v-model="form.name"
          placeholder="请填写项目名称"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="项目状态" :label-width="formLabelWidth">
        <el-input
          v-model="form.status"
          placeholder="请选择项目状态"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input
          v-model="form.ownerName"
          placeholder="请填写负责人名称"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="项目描述" :label-width="formLabelWidth">
        <el-input
          v-model="form.description"
          placeholder="请填写项目描述"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue';
import { useAxios } from '@/hooks/useAxios';
const { post } = useAxios();
// 弹窗标题
const dialogTile = ref('新增项目');
const dialogType = ref('add');
// 弹窗状态
const dialogFormVisible = ref(false);
const formLabelWidth = ref('100px');
const form = reactive({
  name: '',
  status: '',
  ownerName: '',
  description: '',
});
const initForm = (type, data) => {
  dialogType.value = type;
  if (dialogType.value == 'add') {
    dialogTile.value = '新增项目';
  } else {
    dialogTile.value = '修改项目';
    console.log(data);
    Object.assign(form, data);
  }
};
// 取消按钮
const cancle = () => {
  Object.assign(form, {
    name: '',
    status: '',
    ownerName: '',
    description: '',
  });
  dialogFormVisible.value = false;
};
// 确认按钮
const emit = defineEmits(['updateList']);
const confirm = () => {
  if (dialogType.value == 'add') {
    post('/project/createProject', form)
      .then(() => {
        emit('updateList');
      })
      .finally(() => {
        cancle();
      });
  } else {
    console.log('edit form', form);
    post('/project/updateProject', form)
      .then(() => {
        emit('updateList');
      })
      .finally(() => {
        cancle();
      });
  }
};
defineExpose({ dialogFormVisible, initForm });
</script>
<style scoped></style>
